<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入的vue.js-->
    <script src="../js/vue.js"></script>
    <!--引入elementUI的css-->
    <link  type="text/css" rel="stylesheet" href="../css/index.css">
    <!--引入elementUI的js-->
    <script src="../js/index.js"></script>
    <!--引入axios.js-->
    <script src="../js/axios.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            /* 背景渐变，营造层次感 */
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: "Microsoft Yahei", sans-serif;
        }

        .login-container {
            width: 400px;
            /* 白色卡片，带阴影和圆角 */
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            padding: 30px;
            box-sizing: border-box;
        }

        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .login-header h2 {
            color: #333;
            font-size: 24px;
            font-weight: 600;
            margin: 0;
        }

        .login-form {
            width: 100%;
        }

        .el-form-item {
            margin-bottom: 25px;
        }

        .el-input {
            border-radius: 4px;
        }

        .el-input__prefix {
            color: #409eff;
        }

        .el-button {
            width: 100%;
            border-radius: 4px;
            font-size: 16px;
        }

        .footer-links {
            text-align: right;
            margin-top: 15px;
        }

        .footer-links a {
            color: #606266;
            text-decoration: none;
            font-size: 14px;
            margin-left: 15px;
            transition: color 0.3s;
        }

        .footer-links a:hover {
            color: #409eff;
        }
    </style>
</head>

<body>
<!-- 优化后的登录表单容器 -->
<div id="app" class="login-container">
    <div class="login-header">
        <h2>欢迎登录</h2>
    </div>
    <el-form :model="loginForm" ref="form" class="login-form">
        <el-form-item>
            <el-input
                    v-model="loginForm.userName"
                    placeholder="请输入用户名"
                    prefix-icon="el-icon-user">
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-input
                    v-model="loginForm.password"
                    type="password"
                    placeholder="请输入密码"
                    prefix-icon="el-icon-lock"
                    show-password>
            </el-input>
        </el-form-item>
        <el-button
                type="primary"
                @click="handleLogin"
                :loading="loading">
            登录
        </el-button>
    </el-form>

    <div class="footer-links">
        <a href="#">忘记密码?</a>
        <a href="#">注册账号</a>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loginForm: {
                    userName: '',
                    password: '',
                },
                loading: false  // 新增加载状态
            }
        },
        methods: {
            handleLogin() {
                this.loading = true;  // 显示加载动画
                var _this = this;
                // 使用axios发送登录请求
                axios.get('/Day-08-29-SpringBoot-RBAC/user/login?userName=' + this.loginForm.userName + "&password=" + this.loginForm.password)
                    .then(response => {
                        this.loading = false;  // 隐藏加载动画
                        if (response.data.code == 200) {
                            _this.$message({
                                message: '登录成功',
                                type: 'success'
                            });
                            // 实际项目中可跳转到首页
                            window.location.href = '/Day-08-29-SpringBoot-RBAC/html/index.html';
                        } else {
                            _this.$message.error('用户名或者密码错误');
                        }
                    })
                    .catch(error => {
                        this.loading = false;  // 隐藏加载动画
                        console.error('请求错误:', error);
                        alert('登录请求异常');
                    });
            }
        }
    });
</script>
</body>
</html>